<template>
    <view class="activity-list">
        <view class="activity-item" v-for="item in activities" :key="item.id" @click="goDetailActivity(item)">
            <view class="activity-image">
                <!-- new Date(new Date()).getTime() > new Date(item.endTime).getTime() -->
                <image :src="`/gongyi/common/download?name=${item.picture}`" mode="aspectFit">
                    <view class="activity-status"
                        v-if="new Date(new Date()).getTime() < new Date(item.endTime).getTime()">进行中</view>
                    <view class="activity-status"
                        v-if="new Date(new Date()).getTime() > new Date(item.endTime).getTime() ">已截止</view>
            </view>
            <view class="activity-details">
                <h3 class="activity-title">{{item.activityName}}</h3>
                <p class="activity-description">{{item.introduction}}</p>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                activities: [],
                id:'',
            }
        },
        onLoad() {
            this.id = uni.getStorageSync("user").id;
            this.showBriefActivity();
            console.log(this.id);
        },
        methods: {
            async showBriefActivity() {
                // console.log("userInfo", this.userInfo);
                await uni.request({
                    url: '/gongyi/user/joinedActivity',
                    method: 'GET',
                    data:{
                        id:this.id
                    },
                    success: res => {
                        this.activities = res.data.activities;
                        // console.log(res.data.activities);
                    }
                })
            },
            goDetailActivity(item) {
                uni.navigateTo({
                    url: '/pages/fabu/more-activity/baoming/baoming?id=' + item.id + "&tag=0"
                })
            },
        },
    }
</script>
<style lang="scss">
    .activity-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
        margin-top: 30rpx;
    }

    .activity-item {
        width: 33.33%;
        padding: 0 15px;
        margin-bottom: 30rpx;
        margin-left: 10px;
    }

    .activity-image {
        width: 100%;
        height: 100upx;
        padding-bottom: 30%;
        position: relative;
        image {
            width: 100%;
            height: 200%;
            opacity: 1;
        }
    }

    // .activity-image img {
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     width: 100%;
    //     height: 100%;
    //     object-fit: cover;

    // }

    .activity-status {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 4px 8px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, .5);
        color: #fff;
        font-size: 12px;
    }

    .activity-details {
        margin-top: 10px;
    }

    .activity-title {
        font-size: 1em;
        font-weight: bold;
        margin: 0;
    }

    .activity-description {
        font-size: 1em;
        color: #666;
        margin: 10px 0;
    }
</style>